<template>
  <div class="order">
    <van-nav-bar
      title="我的订单"
      left-text="上一页"
      right-text="我的"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        class="item"
        v-for="item in order"
        :key="item.id"
        @click="toDetail(item.id)"
      >
        <p>
          <van-icon name="arrow-left" />购买时间：{{ item.createdAt | time }}
        </p>
        <van-card
          v-for="det in item.details"
          :key="det.id"
          :num="det.amount"
          :price="item.price.toFixed(2)"
          :desc="item.desc"
          :title="det.product.name"
          :thumb="det.product.coverImage | imgUrl"
          @click="toDetail(item.id)"
        >
        </van-card>
        <p class="sumprice">总价：￥{{ item.price }}</p>
      </div>
    </van-list>
  </div>
</template>

<script>
import { orderList } from "../services/order.js";
export default {
  data() {
    return {
      order: [],
      loading: false,
      finished: false,
      page: 1,
      pages: 0,
    };
  },
  created() {
    orderList(1).then((res) => {
      this.order.push(...res.data);
      this.pages = res.pages;
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "User",
      });
    },
    onLoad() {
      this.page++;
      if (this.page >= this.pages) {
        this.finished = true;
        return;
      } else {
        orderList(this.page).then((res) => {
          this.order.push(...res.data);
          this.loading = false;
        });
      }
    },
    toDetail(id) {
      this.$router
        .push({
          name: "OrderDetail",
          query: {
            id,
          },
        })
        .catch((err) => err);
    },
  },
};
</script>

<style scoped>
p {
  background: #fafafa;
  margin: 0;
  text-align: left;
  padding: 5px;
  line-height: 30px;
}
.sumprice {
  background: #fafafa;
  margin-top: 0;
  text-align: right;
}
.item {
  width: 98vw;
  border: 1px solid #dddddd;
  border-radius: 10px;
  margin: 10px auto;
}
>>> .van-card {
  margin: 0;
}
</style>
